<template>
  <div class="reportContainer">
    <!-- 头部 -->
    <van-nav-bar title="智慧工地日报" class="navheadrt"> </van-nav-bar>
    <!-- 日历 -->
    <div class="caldenr f fb">
      <div class="caldenr-left f">
        <div @click="showDate = true" class="date">{{ today }}</div>
        <van-icon name="arrow-down" />
      </div>
      <div class="caldenr-middle">星期{{ today_week }}</div>
      <div class="caldenr-right f fc" @click="toDetails">
        详情 <van-icon name="arrow" />
      </div>
      <div class="overlay" v-show="showDate" @click="showDate = false"></div>
      <div class="datepopup" v-show="showDate">
        <van-datetime-picker
          type="date"
          @cancel="showDate = false"
          @confirm="onConfirmstart_date"
          v-model="currentDate"
          :min-date="minDate"
          :max-date="maxDate"
          :formatter="formatter"
        />
      </div>
    </div>
    <!-- 列表 -->
    <div class="reportCont">
      <!--劳务实名制-->
      <div class="reportList">
        <div class="reporttit">劳务实名制</div>
        <div class="cont f">
          <div class="cont_left f fc">
            <div class="leftdiv f fn fc">
              <p class="cont_left-top">
                <span class="num">{{
                  RealNameSystem.Attendance == null
                    ? "-"
                    : RealNameSystem.Attendance
                }}</span
                >人
              </p>
              <p class="cont_left-bot">出勤人数</p>
            </div>
          </div>
          <div class="cont_right fl">
            <ul class="contright_ul">
              <li class="contright_li oneLine">
                有{{
                  RealNameSystem.UnReportedNum == null
                    ? "-"
                    : RealNameSystem.UnReportedNum
                }}人未成功上报，请及时处理；
              </li>
              <li class="contright_li oneLine">
                有{{
                  RealNameSystem.UnAttendance == null
                    ? "-"
                    : RealNameSystem.UnAttendance
                }}人连续5天未出勤，请引起重视；
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--物联网监测-->
      <div class="reportList">
        <div class="reporttit">物联网监测</div>
        <div class="cont f">
          <div class="cont_left f fc">
            <div class="leftdiv f fn fc">
              <p class="cont_left-top">
                <span class="num">{{
                  InternetMonitoring.Attendance == null
                    ? "-"
                    : InternetMonitoring.Attendance
                }}</span
                >次
              </p>
              <p class="cont_left-bot">预警次数</p>
            </div>
          </div>
          <div class="cont_right fl">
            <ul class="contright_ul">
              <li
                class="contright_li oneLine"
                v-if="InternetMonitoring.TowerCraneWarming !== null"
              >
                塔吊预警{{
                  InternetMonitoring.TowerCraneWarming == null
                    ? "-"
                    : InternetMonitoring.TowerCraneWarming
                }}次，请及时处理；
              </li>
              <li
                class="contright_li oneLine"
                v-if="InternetMonitoring.RaiseDustWarming !== null"
              >
                扬尘预警{{
                  InternetMonitoring.RaiseDustWarming == null
                    ? "-"
                    : InternetMonitoring.RaiseDustWarming
                }}次，请及时处理；
              </li>
              <li
                class="contright_li oneLine"
                v-if="InternetMonitoring.NoiseWarming !== null"
              >
                噪音预警{{
                  InternetMonitoring.NoiseWarming == null
                    ? "-"
                    : InternetMonitoring.NoiseWarming
                }}次，请及时处理；
              </li>
              <li
                class="contright_li oneLine"
                v-if="InternetMonitoring.TowerCraneWarming !== null"
              >
                升降机预警{{
                  InternetMonitoring.TowerCraneWarming == null
                    ? "-"
                    : InternetMonitoring.TowerCraneWarming
                }}次，请及时处理；
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--物料管理-->
      <div class="reportList">
        <div class="reporttit">物料管理</div>
        <div class="cont f">
          <div class="cont_left f fc">
            <div class="leftdiv f fn fc">
              <p class="cont_left-top">
                <span class="num">{{
                  MaterialList.Total == null ? "-" : MaterialList.Total
                }}</span
                >t
              </p>
              <p class="cont_left-bot">材料进场</p>
            </div>
          </div>
          <div class="cont_right fl">
            <ul class="contright_ul">
              <li class="contright_li oneLine">
                进场材料{{
                  MaterialList.Type == null ? "-" : MaterialList.Type
                }}类，请及时送审报验；
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--进度管理-->
      <div class="reportList">
        <div class="reporttit">进度管理</div>
        <div class="cont f">
          <div class="cont_left f fc">
            <div class="leftdiv f fn fc">
              <p class="cont_left-top">
                <span class="num">{{
                  ProgressManagement.WholePercentage == null
                    ? "-"
                    : ProgressManagement.WholePercentage
                }}</span
                >%
              </p>
              <p class="cont_left-bot">整体进度</p>
            </div>
          </div>
          <div class="cont_right fl">
            <ul class="contright_ul">
              <li class="contright_li oneLine">
                进度滞后{{
                  ProgressManagement.WholeLagging == null
                    ? "-"
                    : ProgressManagement.WholeLagging
                }}天，请合理安排施工；
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--质量安全-->
      <div class="reportList">
        <div class="reporttit">质量安全</div>
        <div class="cont f">
          <div class="cont_left f fc">
            <div class="leftdiv f fn fc">
              <p class="cont_left-top">
                <span class="num"
                  >{{
                    addnum == null
                      ? "-"
                      : addnum
                  }}/{{
                    reducenum == null
                      ? "-"
                      : reducenum
                  }}</span
                >
              </p>
              <p class="cont_left-bot">销项/新增</p>
            </div>
          </div>
          <div class="cont_right fl">
            <ul class="contright_ul">
              <li class="contright_li oneLine">
                剩余{{
                  haldenum == null
                    ? "-"
                    : haldenum
                }}项问题未倾销，请及时处理；
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { GetDailyDiaryInfo } from "@/api/api";
const currentDate = new Date();
const maxDate = new Date();

export default {
  data() {
    return {
      //日历
      today: "",
      today_week: "",
      showDate: false,
      minDate: new Date(2020, 0, 1),
      maxDate,
      currentDate,
      //天气
      WeatherForecast: {},
      RealNameSystem: {}, //劳务实名制
      ProgressManagement: {}, //进度管理
      InspectionList: {}, //现场巡检
      InternetMonitoring: {}, //物联网监测
      MaterialList: [], //物料管理
      addnum: 0, //质量安全新增数
      reducenum: 0, //质量安全倾销数
      haldenum:0 //剩余问题数
    };
  },
  mounted() {
    this.todyDate();
    this.select();
  },
  methods: {
    async select() {
      var than = this;
      than.$toast.loading({
        mask: true,
        message: "加载中...",
        className: "my-toast",
      });
      let res = await this.Request(
        GetDailyDiaryInfo({
          ProjectID: localStorage.getItem("projectid"),
          date: than.today,
        })
      );
      if (res.StatusCode === 200) {
        than.$toast.clear();
        this.WeatherForecast = res.Result.WeatherForecast;
        this.ProgressManagement = res.Result.ProgressManagement;
        this.RealNameSystem = res.Result.RealNameSystem;
        this.InspectionList = res.Result.InspectionList;

        this.InternetMonitoring = res.Result.InternetMonitoring;
        this.MaterialList = res.Result.MaterialList;
        //质量安全新增
        let new_arr = this.InspectionList.map((obj) => {
          return obj.ProblemNum;
        });
        console.log("质量安全新增", new_arr);
        var sum = 0;
        for (let i = 0; i < new_arr.length; i++) {
          sum += parseInt(new_arr[i]);
        }
        console.log(sum);
        this.addnum = sum;
        console.log("质量安全1", this.addnum);
        //质量安全新增
        let handle_arr = this.InspectionList.map((obj) => {
          return obj.HandleNum;
        });
        console.log("质量安全减少", handle_arr);
        var reduce = 0;
        for (let i = 0; i < handle_arr.length; i++) {
          reduce += parseInt(handle_arr[i]);
        }
        console.log(reduce);
        this.reducenum = reduce;
        console.log("质量安全1", this.reducenum);
        this.haldenum= this.addnum - this.reducenum
      } else {
        this.$message({
          type: "error",
          message: res.Message,
          center: "true",
        });
      }
    },
    formatter(type, value) {
      if (type === "year") {
        return `${value}年`;
      } else if (type === "month") {
        return `${value}月`;
      } else if (type === "day") {
        return `${value}日`;
      } else if (type === "hour") {
        return `${value}时`;
      } else if (type === "minute") {
        return `${value}分`;
      } else if (type === "second") {
        return `${value}秒`;
      }
      return value;
    },
    todyDate() {
      var a = new Array("日", "一", "二", "三", "四", "五", "六");
      var week = new Date().getDay();
      this.today_week = a[week];
      var d = new Date();
      let year = d.getFullYear();
      let month = d.getMonth() + 1;
      let day = d.getDate();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      this.today = year + "-" + month + "-" + day;
    },
    //开始时间
    onConfirmstart_date(val) {
      let year = val.getFullYear();
      let month = val.getMonth() + 1;
      let day = val.getDate();
      let hour = val.getHours();
      let minute = val.getMinutes();
      if (month >= 1 && month <= 9) {
        month = `0${month}`;
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`;
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`;
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`;
      }
      var a = new Array("日", "一", "二", "三", "四", "五", "六");
      var week = val.getDay();
      this.today_week = a[week];
      this.today = `${year}/${month}/${day}`;
      this.select();
      this.showDate = false;
    },
    //去详情
    toDetails() {
      this.$router.push({ path: "/reportDetail" });
    },
  },
};
</script>
<style lang="stylus" scoped>
@import './assets/common';
@import '~@/assets/css/resetVant.css';

.oneLine {
  display: flex;
  align-items: center;
}

.overlay {
  position: absolute;
  bottom: 0;
  right: 0%;
  // right: 0;
  transform: translate(0%, 0);
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 2000;
}

.datepopup {
  box-sizing: border-box;
  height: 30%;
  width: 750px;
  background-color: #fff;
  bottom: 0;
  right: 0%;
  // right: 0;
  transform: translate(0%, 0);
  position: absolute;
  z-index: 20001;
}

.reportContainer {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .nav-bar {
    width: 100%;
    height: 100px;
    background-color: #699FFF;
    display: flex;
    justify-content: center;
    align-items: center;

    .title {
      flex: 1;
      text-align: center;
      font-size: 36px;
      font-family: SourceHanSansCN-Medium;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      line-height: 100px;
    }
  }

  .caldenr {
    width: 100%;
    height: 90px;
    border-bottom: 1px solid rgba(40, 40, 40, 0.2);
    padding: 0 0 0 40px;
    box-sizing: border-box;

    .caldenr-left {
      font-size: 28px;
      font-family: Microsoft YaHei;
      font-weight: 300;
      color: #282828;

      .date {
        margin-right: 10px;
      }
    }

    .caldenr-middle {
      font-size: 28px;
    }

    .caldenr-right {
      width: 107px;
      height: 50px;
      background: #699fff;
      border-radius: 5px 0 0 5px;
      font-size: 28px;
      font-family: Microsoft YaHei;
      font-weight: 300;
      color: #FFFFFF;
    }
  }

  .reportCont {
    width: 100%;
    height: calc(100% - 300px);
    overflow-y: scroll;
  }

  .reportList {
    width: 100%;
    border-left: 10px solid #699fff;
    margin-bottom: 26px;
    border-bottom: 1px solid rgba(40, 40, 40, 0.2);
    padding: 25px 0;
    box-sizing: border-box;

    .reporttit {
      width: calc(100% - 30px);
      margin-left: 30px;
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #699fff;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(40, 40, 40, 0.2);
      margin-bottom: 25px;
    }

    .cont {
      width: 100%;
      min-height: 180px;

      .cont_left {
        width: 230px;
        flex-shrink: 0;

        .leftdiv {
          width: 143px;
          height: 143px;
          border: 6px solid #699fff;
          border-radius: 100%;

          .cont_left-top {
            margin-bottom: 12px;
            font-size: 22px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #282828;

            .num {
              font-size: 40px;
              font-family: Arial;
              font-weight: 400;
              color: #699fff;
            }
          }

          .cont_left-bot {
            font-size: 22px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #595959;
          }
        }
      }

      .cont_right {
        .contright_ul {
          width: 100%;
          padding-top: 10px;

          .contright_li {
            width: 100%;
            min-height: 57px;
            padding: 10px 0 10px 28px;
            // line-height: 57px;
            background: #EEEDED;
            font-size: 26px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #595959;
            box-sizing: border-box;
            margin-bottom: 18px;
            // flex-wrap:wrap;
          }
        }
      }
    }
  }
}

.flexwrap {
  flex-wrap: wrap;
}
</style>